<template>
  <!-- //这里使用element ui中的组件 因此需要完全了解需要去看element的文档 -->
  <div class="abc">
    <div class="container">
      <div class="form-box">
        <!-- 注册 -->
        <div class="register-box hidden">
          <h1>register</h1>
          <input type="text" placeholder="用户名" />
          <input type="email" placeholder="邮箱" />
          <input type="password" placeholder="密码" />
          <input type="password" placeholder="确认密码" />
          <button>注册</button>
        </div>
        <!-- 登录 -->
        <div class="login-box">
          <el-form :model="form" status-icon :rules="rules" ref="form">
            <h1 class="login_title">零小闲零食店进销存管理系统</h1>
            <el-form-item
              label="用户名"
              label-width="80px"
              prop="username"
              class="username"
            >
              <el-input
                type="input"
                v-model="form.username"
                auto-complete="off"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="密码"
              label-width="80px"
              prop="password"
              class="password"
            >
              <el-input
                type="password"
                v-model="form.password"
                auto-complete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login" class="login-btn"
                >登陆</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="con-box right">
        <h2>欢迎来到<span>管理系统</span></h2>
        <img src="../../assets/images/2.png" alt="" />
        <p>没有账号？</p>
        <button id="register" @click="register">去注册</button>
      </div>
    </div>
    <el-dialog :title="'注册新用户'" :visible.sync="isShow" width="30%">
      <register :isShow="isShow" @submitForm="submitForm"></register>
    </el-dialog>
  </div>
</template>

<script>
import { getMenu, getUserInfo } from "../../api/data";
import register from "./component/register.vue";
export default {
  components: { register },
  name: "login",
  data() {
    return {
      form: {},
      menuForm: [
        {
          path: "/home",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "home/index",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品分类管理",
          icon: "video-play",
          url: "mall/index",
        },
        {
          path: "/person",
          name: "person",
          label: "个人信息",
          icon: "location",
          url: "person/person",
        },
        {
          path: "/password",
          name: "password",
          label: "修改密码",
          icon: "location",
          url: "password/password",
        },
        {
          path: "/newmall",
          name: "newmall",
          label: "增加分类",
          icon: "location",
          url: "newmall/newmall",
        },
        {
          path: "/findmall",
          name: "findmall",
          label: "查找分类",
          icon: "location",
          url: "findmall/findmall",
        },
        {
          path: "/goods",
          name: "goods",
          label: "商品信息",
          icon: "notebook-1",
          url: "goods/goods",
        },
        {
          path: "addgoods",
          name: "addgoods",
          label: "添加商品",
          icon: "notebook-1",
          url: "addgoods/addgoods",
        },
        {
          label: "其他",
          icon: "location",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "other/pageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "other/pageTwo",
            },
          ],
        },
      ],
      isShow: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            message: "用户名长度不能小于三位",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(params) {
      this.isShow = params;
    },
    register() {
      this.isShow = true;
    },
    login() {
      getMenu(this.form).then(({ data: res }) => {
        if (res.status == 0) {
          this.$store.commit("clearMenu");
          this.$store.commit("clearUserData");
          this.$store.commit("setToken", res.token);
          this.$store.commit("setMenu", this.menuForm);
          this.$store.commit("addMenu", this.$router);
          this.$router.push({ name: "home" });
          getUserInfo(res.token).then(({ data: res }) => {
            if (res.status == 0) {
              this.$store.commit("setUserData", [res.data]);
            }
          });
          // if (res.code === 20000) {
          //   console.log(res.data);
          //   //当受到服务器返回的数据之后 对这些数据进行一些列的处理 数据实际处理的地方在vuex中
          //   this.$store.commit("clearMenu"); //删除原来的也就是上一个的数据 如果有的话 简单来说这里是为了去除上一个登入人的信息
          //   this.$store.commit("setToken", res.data.token); //把服务器中应该属于这个用户的token给他
          //   this.$store.commit("setMenu", res.data.menu); //把服务器中的应该属于这个用户的权限给他 有关这个用户的一些信息
          //   this.$store.commit("addMenu", this.$router); //根据传递过来的路由 配置路由权限
          //   this.$router.push({ name: "home" });
          // } else {
          //   this.$message.warning(res.data.message);
          // }
          this.$message({
            message: "登录成功",
            type: "success",
          });
        } else if (res.status == 1) {
          this.$message({
            message: "用户名或密码错误",
            type: "warning",
          });
        } else {
          this.$message({
            message: "connection error",
            type: "warning",
          });
        }
      });
      //const token= Mock.random.guid()
      //this.$store.commit('setToken'.token)
      // this.$router.push({ name:'home' })
    },
  },
};
</script>
<style lang="less" scoped>
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: white;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.login-btn {
  margin-left: 75px;
}
.abc {
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #f3e7e9, #e3eeff);
}
.container {
  background-color: #fff;
  width: 650px;
  height: 415px;
  border-radius: 5px;
  /* 阴影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  /* 相对定位 */
  position: relative;
}
.form-box {
  /* 绝对定位 */
  position: absolute;
  top: -10%;
  left: 5%;
  background-color: #d3b7d8;
  width: 320px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  /* 动画过渡 加速后减速 */
  transition: 0.5s ease-in-out;
}
.register-box,
.login-box {
  /* 弹性布局 垂直排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hidden {
  display: none;
  transition: 0.5s;
}
.login_title {
  text-align: center;
  margin-bottom: 25px;
  /* 大写 */
  text-transform: uppercase;
  color: #fff;
  /* 字间距 */
  letter-spacing: 5px;
}
input {
  background-color: transparent;
  width: 70%;
  color: #fff;
  border: none;
  /* 下边框样式 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 10px 0;
  text-indent: 10px;
  margin: 8px 0;
  font-size: 14px;
  letter-spacing: 2px;
}
input::placeholder {
  color: #fff;
}
input:focus {
  color: #a262ad;
  outline: none;
  border-bottom: 1px solid #a262ad80;
  transition: 0.5s;
}
input:focus::placeholder {
  opacity: 0;
}
.form-box button {
  width: 70%;
  margin-top: 35px;
  background-color: #f6f6f6;
  outline: none;
  border-radius: 8px;
  padding: 13px;
  color: #a262ad;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
}
.form-box button:hover {
  background-color: #a262ad;
  color: #f6f6f6;
  transition: background-color 0.5s ease;
}
.con-box {
  width: 50%;
  /* 弹性布局 垂直排列 居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 绝对定位 居中 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.con-box.left {
  left: -2%;
}
.con-box.right {
  right: -2%;
}
.con-box h2 {
  color: #8e9aaf;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 4px;
}
.con-box p {
  font-size: 12px;
  letter-spacing: 2px;
  color: #8e9aaf;
  text-align: center;
}
.con-box span {
  color: #d3b7d8;
}
.con-box img {
  width: 150px;
  height: 150px;
  opacity: 0.9;
  margin: 40px 0;
}
.con-box button {
  margin-top: 3%;
  background-color: #fff;
  color: #a262ad;
  border: 1px solid #d3b7d8;
  padding: 6px 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
}
.con-box button:hover {
  background-color: #d3b7d8;
  color: #fff;
}
</style>